<template>
  <div class="flex flex-col h-full overflow-hidden">
    <app-header/>

    <main>
      <h2 class="page-title">系统设置</h2>

      <div class="settings-grid">
        <div class="setting-card" id="setting-plc" @click="navigateToSetting('plc_config')">
          <span class="setting-icon"><i class="fas fa-server"></i></span>
          <h3 class="setting-title">PLC 配置</h3>
          <p class="setting-description">配置 PLC 连接、流程模板和心跳。</p>
        </div>

        <div class="setting-card" id="setting-event" @click="navigateToSetting('event_config_nav')">
          <span class="setting-icon"><i class="fas fa-exchange-alt"></i></span>
          <h3 class="setting-title">事件配置</h3>
          <p class="setting-description">配置各个 MES 通讯事件的参数。</p>
        </div>

        <div class="setting-card" id="setting-alarm" @click="navigateToSetting('alarm_config_list')">
          <span class="setting-icon"><i class="fas fa-bell"></i></span>
          <h3 class="setting-title">报警配置</h3>
          <p class="setting-description">配置 PLC 报警地址和描述信息。</p>
        </div>

        <div class="setting-card" id="setting-address" @click="navigateToSetting('plc_address_list')">
          <span class="setting-icon"><i class="fas fa-map-marker-alt"></i></span>
          <h3 class="setting-title">PLC 地址配置</h3>
          <p class="setting-description">管理和查看 PLC 地址列表。</p>
        </div>

        <div class="setting-card" id="setting-user" @click="navigateToSetting('user_management_list')">
          <span class="setting-icon"><i class="fas fa-users"></i></span>
          <h3 class="setting-title">用户管理</h3>
          <p class="setting-description">管理用户账号和权限。</p>
        </div>

      </div>
    </main>
  </div>
</template>

<script setup>
import {ref, onMounted, onUnmounted} from 'vue'
import {useRouter} from 'vue-router' // 导入 useRouter
// 不再需要导入 AppHeader，因为它已全局配置

const router = useRouter() // 获取路由实例

// --- 方法 ---

// 导航到具体的设置页面
const navigateToSetting = (pageKey) => {
  // 定义页面映射关系 (使用路由路径而不是 .html 文件名)
  // 请根据你的实际路由配置来修改这些路径
  const routeMap = {
    'plc_config': '/settings/plc-config', // 假设你的 PLC 配置路由是 /settings/plc-config
    'event_config_nav': '/settings/event-config', // 假设你的事件配置导航路由是 /settings/event-config
    'alarm_config_list': '/settings/alarm-config', // 假设你的报警配置路由是 /settings/alarm-config
    'plc_address_list': '/settings/plc-address-config', // 假设你的 PLC 地址配置路由是 /settings/plc-addresses
    'user_management_list': '/settings/user-management' // 假设你的用户管理路由是 /settings/user-management
    // 添加其他设置页面的映射
  }

  const targetRoute = routeMap[pageKey]

  if (targetRoute) {
    // 使用 router.push 进行路由跳转
    router.push(targetRoute)
  } else {
    console.error(`未知设置页面 key: ${pageKey}`)
    // 可以显示一个错误通知
  }
}


// --- 生命周期钩子 ---
onMounted(() => {
  // 页面加载后可能需要执行一些初始化，但对于导航页通常不需要
})

onUnmounted(() => {
  // 清理可能的定时器或事件监听 (对于导航页通常没有)
})

// ESC键返回功能可以通过 Vue Router 的 beforeEach 或组件内部监听实现
// 如果需要在单个组件内实现ESC返回，可以在 mounted 中添加监听，在 unmounted 中移除
onMounted(() => {
  const handleEscape = (event) => {
    if (event.key === 'Escape') {
      router.back() // 使用 router.back() 返回上一页
    }
  }
  document.addEventListener('keydown', handleEscape)
  onUnmounted(() => {
    document.removeEventListener('keydown', handleEscape)
  })
})

</script>

<style scoped>
/* --- 将原始 HTML 文件中的所有自定义样式复制到这里 --- */

/* --- Inherited Styles & Color Palette --- */
/* 根变量通常在全局 CSS 中定义，但为了完整性，这里列出 */
/* :root {
  --bg-primary: #f3f4f6;
  --bg-secondary: #ffffff;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --border-color: #e5e7eb;
  --accent-blue: #3b82f6;
  --status-green: #22c55e;
  --status-yellow: #eab308;
  --status-red: #ef4444;
  --status-gray: #6b7280;
  --status-off: #9ca3af;
  --online-green: #10b981;
  --offline-red: #f43f5e;

--icon-plc: #3b82f6

;
--icon-event: #14b8a6

;
--icon-alarm: #ef4444

;
--icon-address: #8b5cf6

;
--icon-user: #f97316

;
}
*

/

/* body 样式通常由父组件或全局 App.vue 控制 */
/* body {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
} */


/* --- Header (Consistent) --- */
/* Header 样式已移至 AppHeader.vue 或全局 */


/* --- Main Content Area --- */
main {
  flex-grow: 1;
  padding: 1.5rem; /* p-6 */
  overflow-y: auto; /* Enable scrolling for list */
}

.page-title {
  font-size: 1.25rem; /* Larger title */
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  text-align: center;
}

/* --- Settings Navigation Grid --- */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */
  gap: 1.25rem; /* gap-5 */
  max-width: 1000px; /* max-w-md adjusted slightly */
  margin: 0 auto; /* Center grid */
}

/* --- Setting Card Styles --- */
.setting-card {
  background-color: var(--bg-secondary);
  border-radius: 0.75rem; /* rounded-xl */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* shadow-sm */
  padding: 1.25rem; /* p-5 */
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

.setting-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.07), 0 3px 5px -4px rgba(0, 0, 0, 0.07);
  border-color: var(--accent-blue);
}

.setting-icon {
  font-size: 2rem; /* text-3xl */
  margin-bottom: 0.75rem; /* mb-3 */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(59, 130, 246, 0.1); /* Tailwind blue-500 with opacity */
}

/* Specific Icon Colors - needs to be defined or use Tailwind text-{color} */
#setting-plc .setting-icon {
  color: var(--icon-plc);
  background-color: var(--icon-plc-bg);
}

/* blue-500 */
#setting-event .setting-icon {
  color: var(--icon-event);
  background-color: var(--icon-event-bg);
}

/* teal-500 */
#setting-alarm .setting-icon {
  color: var(--icon-alarm);
  background-color: var(--icon-alarm-bg);
}

/* red-500 */
#setting-address .setting-icon {
  color: var(--icon-address);
  background-color: var(--icon-address-bg);
}

/* violet-500 */
#setting-user .setting-icon {
  color: var(--icon-user);
  background-color: var(--icon-user-bg);
}

/* orange-500 */


.setting-title {
  font-size: 0.9rem; /* text-sm */
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem; /* mb-1 */
}

.setting-description {
  font-size: 0.75rem; /* text-xs */
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.4;
}

.setting-card:hover .setting-title {
  color: var(--accent-blue); /* Highlight title on hover */
}


/* Original body inline styles - Should be managed in App.vue or layout */
/* body[style="max-width: 800px; max-height: 600px; margin: auto;"] */
/* Remove or adapt these in your App.vue or main layout component */

</style>
